<template>
  <view style="background-color: #181816; height: 100%;">
    <!-- canvas -->
    <!-- <a :href="collection_detail.cover_url">测试</a> -->
    <view class="share-box" v-if="false">
      <view class="posters" :style="{ height: `${deviation + 1065}rpx` }">
        <canvas
          :style="{ height: `${deviation + 1100}rpx` }"
          class="posters-canvas"
          id="share"
          canvas-id="share"
        ></canvas>
      </view>
    </view>
    <view
      class="this_detail"
      :style="{ backgroundColor: pageColor }"
      v-model="collection_detail"
    >
      <view class="big_img">
        <image class="big-bg" :src="collection_detail.background_image"></image>
        <!-- 自定义返回按钮 -->
        <view class="back_btn" :style="{ top: `${30}rpx` }" @tap="PageBack()">
          <image src="/static/back_btn.png"></image>
        </view>
        <!-- 分享按钮 -->
        <view
          class="share_btn"
          :style="{ top: `${30}rpx` }"
          @click="share"
          open-type="share"
        >
          <image src="/static/share.png"></image>
        </view>
        <!-- 渐变 -->
        <view class="gradient" :style="bgColor"></view>
        <!-- 藏品图（可能有动画） -->
        <!-- <view
          @click="openFile"
          class="collectionImg_box"
          :style="{ transform: animationData }"
        >
          <view class="collectionImg">
            <image :src="collection_detail.cover_url"></image>
          </view>
        </view> -->
        <!-- 3d旋转 -->
        <view>
          <view
            @click="openFile"
            class="preview-box"
            :style="{
              transform: previewStyle.transform,
              border: previewStyle.border,
              transformStyle: previewStyle.transformStyle,
              maxWidth: previewStyle.maxWidth,
              maxHeight: previewStyle.maxHeight,
              width: previewStyle.width,
              height: previewStyle.height,
            }"
          >
            <view
              class="con1 rectangle"
              :style="{
                height: `${imgHeight}rpx`,
                width: `${proportion * 400}rpx`,
              }"
            >
              <image
                mode="aspectFit"
                v-if="collection_detail.cover_url && proportion"
                :style="{
                  border: imgStyle.border,
                  maxWidth: imgStyle.maxWidth,
                  maxHeight: imgStyle.maxHeight,
                  width: imgStyle.width,
                  height: imgStyle.height,
                }"
                :src="collection_detail.cover_url"
              />
              <image
                class="preview-icon"
                v-if="showPlay && proportion"
                src="/static/play.png"
                mode="aspectFit"
              />
            </view>
            <view
              class="con2 rectangle"
              :style="{
                height: `${imgHeight}rpx`,
                width: `${proportion * 400}rpx`,
              }"
            ></view>
            <view
              class="con3 rectangle"
              :style="{
                height: `${imgHeight}rpx`,
              }"
            ></view>
            <view
              class="con4 rectangle"
              :style="{
                height: `${imgHeight}rpx`,
              }"
            ></view>
            <view
              class="con5 rectangle"
              :style="{
                height: `${imgHeight}rpx`,
                width: `${proportion * 400}rpx`,
              }"
            ></view>
            <view
              class="con6 rectangle"
              :style="{
                height: `${imgHeight}rpx`,
                width: `${proportion * 400}rpx`,
              }"
            ></view>
          </view>
        </view>
      </view>
      <!-- 详情 -->
      <view class="detail_content" v-model="collection_detail">
        <!-- 商品信息 -->
        <view class="goods_detail">
          <view class="goods_title">{{ collection_detail.name }}</view>

          <!-- 活动数量，发行方式 -->
          <view class="content_countBox">
            <view class="two_box">
              <!-- 活动下藏品数量 -->
              <view class="count">
                <!-- 总份数 -->
                <view class="total">
                  限量
                </view>
                <!-- 共几款 -->
                <view class="models">
                  {{ collection_detail.show_number }}份
                </view>
              </view>
              <!-- 活动发行类型（字的长度可能不同） -->
              <view class="types">{{ collection_detail.flag }}</view>
            </view>

            <!-- 价格 -->
            <view class="price" style="color: #4ffffe; font-size: 48rpx;">
              <text style="color: #4ffffe; font-size: 26rpx;">￥</text>
              <text style="font-size: 40rpx;">
                {{ collection_detail.price }}
              </text>
            </view>
          </view>
          <view class="goods_host">
            <view class="host">
              <view class="host_logo" v-if="collection_detail.brand_info">
                <image :src="collection_detail.brand_info.icon_image"></image>
              </view>
              <text v-if="collection_detail.brand_info">
                {{ collection_detail.brand_info.brand_name }}
              </text>
            </view>
            <text style="font-style: italic; font-size: 26rpx;">限量发售</text>
          </view>
        </view>
        <!-- 数字藏品小贴士 -->
        <view class="nft_notice">
          <view class="title">数字藏品小贴士</view>
          <view class="notice_img">
            <image
              mode="aspectFit"
              :src="collection_detail.picture_list.notice"
            ></image>
          </view>
        </view>
        <!-- 藏品描述 -->
        <view class="collection_describe" style="padding: 30rpx 0;">
          <view
            class="title"
            style="text-align: center; font-size: 32rpx; color: #4ffffe;"
          >
            <image
              mode="aspectFit"
              :src="collection_detail.picture_list.collection"
              style="width: 490rpx; height: 35rpx;"
            ></image>
          </view>
          <view class="describe" style="width: 90%; margin: 30rpx auto 0;">
            <image
              mode="widthFix"
              class="describe-info"
              style="width: 100%;"
              :src="collection_detail.description_url"
            ></image>
          </view>
        </view>
        <!-- 特别提醒 -->
        <view class="special_notice">
          <view class="title">
            <image
              mode="aspectFit"
              :src="collection_detail.picture_list.special"
              style="width: 490rpx; height: 35rpx;"
            ></image>
          </view>
          <view
            class="describe"
            style="
              width: 90%;
              margin: 30rpx auto;
              font-size: 26rpx;
              color: #babcbb;
            "
          >
            <view>
              请您确保在符合相关法规要求下使用区块链服务。注册卯时数字平台使用的手机号码实名认证信息必须与本人身份信息一致。
            </view>
            <view style="margin-top: 30rpx;">
              请注意：请您于15分钟内完成支付，超时将支付失败，您需重新购买。若出现因操作失误、设备原因或网络延迟导致支付成功但未获得藏品的情形，请联系客服协助处理。
            </view>
          </view>
        </view>
        <!-- 权益说明 -->
        <view class="equity_describe">
          <view class="title">
            <image
              mode="aspectFit"
              :src="collection_detail.picture_list.equit"
              style="width: 490rpx; height: 35rpx;"
            ></image>
          </view>
          <view
            class="describe"
            style="
              width: 90%;
              margin: 30rpx auto;
              font-size: 26rpx;
              color: #babcbb;
              line-height: 40rpx;
            "
          >
            数字藏品为虚拟数字商品，而非实物，仅限中国大陆用户购买，藏品一经出售，不支持退换。版权品的版权使用权归持有用户所有，非版权品的数字藏品版权由发行方或原创者所有，非版权品除另行取得版权拥有者书面同意外，用户不得将数字藏品用于任何商业用途，平台不支持任何形式的有偿转赠与炒作，请警惕诈骗风险。
          </view>
        </view>
        <!-- 去购买按钮 -->
        <view class="footer">
          <view
            class="footer-tip"
            v-if="!userInfo.token || userInfo.is_auth == 1"
          >
            <view v-if="!userInfo.token">*您还未登录,请先登录</view>
            <view v-else-if="userInfo.is_auth == 1">
              *按国家合规要求,实名认证后可使用区块链服务
            </view>
            <view class="footer-btn">
              <view
                class="footer-login"
                v-if="!userInfo.token"
                @click="Login()"
              >
                登录
              </view>
              <view class="footer-auth" @click="Verify()" v-else>
                实名认证
              </view>
            </view>
          </view>
          <view class="To_buy" @click="buy()" v-show="collectionStatus == '1'">
            <button>立即购买</button>
          </view>
          <view class="To_buy" v-show="collectionStatus == '6'">
            <view class="buying">
              <view class="overplus_time">
                <view style="text-align: left;">
                  <text style="color: #fff; font-size: 26rpx;">￥</text>
                  <text style="font-size: 40rpx; color: #fff;">
                    {{ orderInfo.price }}
                  </text>
                </view>
                <view style="color: #fff; width: 300rpx; text-align: left;">
                  剩余可支付时间 {{ time }}
                </view>
              </view>
              <view style="display: flex;">
                <view class="cancel" @click="cancel()">取消订单</view>
                <view class="continue" @click="continuePay()">立即支付</view>
              </view>
            </view>
          </view>
          <view
            class="To_buy"
            @click="advance()"
            v-show="collectionStatus == '2'"
          >
            <button>关注该活动</button>
          </view>
          <view
            class="To_buy"
            @click="cancelFollow(collection_detail.follow_id)"
            v-show="collectionStatus == '3'"
          >
            <button>已关注</button>
          </view>
          <view class="To_buy" v-show="collectionStatus == '4'">
            <button class="exhausted">已售罄</button>
          </view>
          <view class="To_buy" v-show="collectionStatus == '5'">
            <button class="exhausted">已结束</button>
          </view>
          <view class="To_buy" v-show="collectionStatus == '7'">
            <button>已购买</button>
          </view>
          <view class="To_buy" v-show="collectionStatus == '8'">
            <view class="overTime">
              <view class="overTime_text">
                您的订单超时未支付
              </view>
              <view class="confirm" @click="updateOrder()">
                确认
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 分享保存遮罩 -->
    <u-popup
      ref="pop1"
      :show="showShare"
      :round="40"
      mode="center"
      @close="close"
      @open="open"
      @touchmove.stop.prevent=""
    >
      <view v-if="false">
        <view class="share_content">
          <view class="share_img">
            <image
              src="https://publish.onedaen.com/uploads/static/collection_img.png"
            ></image>
          </view>
          <view class="share_detail">
            <view class="share_text">
              <view class="name">明代书画家作品数字展</view>
              <view class="two_box">
                <!-- 活动下藏品数量 -->
                <view class="count">
                  <!-- 总份数 -->
                  <view class="total">限量份</view>
                </view>
                <!-- 共几款 -->
                <view class="models">共5款</view>
                <!-- 活动发行类型（字的长度可能不同） -->
                <view class="types">空投</view>
              </view>
              <view class="host">
                <view class="host_logo">
                  <image
                    src="https://publish.onedaen.com/uploads/static/host-logo.png"
                  ></image>
                </view>
                <text>话剧皮囊</text>
              </view>
            </view>
            <view class="share_logo">
              <view class="zxl_logo" style="margin-top: 150rpx;">
                <image
                  style="width: 260rpx; height: 50rpx;"
                  src="../../static/zxl_yde.png"
                ></image>
              </view>
              <view class="share_qrcode">
                <image
                  class="qrcode"
                  src="https://publish.onedaen.com/uploads/static/qrcode.jpg"
                ></image>
                <text>长按识别二维码</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="posters">
        <canvas
          @longpress.stop="saveSharePic"
          class="posters-canvas"
          canvas-id="share"
        ></canvas>
      </view>
    </u-popup>
    <!-- 分享保存遮罩 -->
    <pop
      ref="pop1"
      direction="center"
      :is_close="true"
      :is_mask="false"
      :width="100"
      height="fit-content"
      :maskFun="true"
      @watchOpen="watchOpen"
      @watchClose="close"
    >
      <view>
        <view class="share_content">
          <view class="share_img">
            <image></image>
          </view>
          <view class="share_detail">
            <view class="share_text">
              <text class="name">名称：明代书画家作品数字展</text>
              <text class="brand">品牌方：XXX</text>
              <text class="company">发行：XXXXX有限公司</text>
            </view>
            <view class="share_qrcode">
              <image class="qrcode"></image>
              <text>长按识别二维码</text>
            </view>
          </view>
        </view>
        <view class="save_btn" @click="clickSaveImg">
          <button>保存图片</button>
        </view>
      </view>
    </pop>
    <!-- 领取遮罩 -->
    <u-popup :show="show" :round="30" mode="center" @close="close" @open="open">
      <view class="get_success">
        <image
          src="../../static/bg.png"
          style="position: relative; width: 100%; border-radius: 30rpx;"
        ></image>
        <view class="content">
          <view class="success_img">
            <image src="/static/get_success.png"></image>
          </view>
          <view class="success_text">
            恭喜您，领取成功！
          </view>
          <view class="get_btn" @click="myCollection">
            <button>前往查看</button>
          </view>
        </view>
      </view>
    </u-popup>

    <view class="buys-box">
      <BuyPop ref="buys" @watchClose="close">
        <view class="buy">
          <view class="buy_content">
            <view class="buy_header">
              <view class="things_img">
                <image
                  :src="collection_detail.cover_url"
                  mode="widthFix"
                ></image>
              </view>
              <view class="buy-box">
                <view class="header_text">
                  <view class="buy-price">单价:</view>
                  <view class="price">
                    <text>￥</text>
                    {{ collection_detail.price }}
                  </view>
                </view>

                <view class="limit">
                  限购：{{ collection_detail.buy_limit }}
                </view>
                <view class="limit">
                  已购：{{ collection_detail.purchased_num }}
                </view>
              </view>
            </view>

            <view class="count">
              <view class="count_title">
                <text>购买数量</text>
                <view class="limit_box">
                  可购{{ collection_detail.surplus_available_num }}件
                </view>
              </view>
              <view class="change_count">
                <button class="reduce" @click="reduceCount">-</button>
                <input value="buyCount" v-model="buyCount" />
                <button
                  class="add"
                  @click="
                    addCount(
                      collection_detail.inventory,
                      collection_detail.surplus_available_num,
                    )
                  "
                >
                  +
                </button>
              </view>
            </view>
            <view class="buy_now" @click="buyNow()">
              <button>立即购买</button>
            </view>
            <view class="buy_tip">
              请在15分钟内完成付款
            </view>
          </view>
        </view>
      </BuyPop>
    </view>
    <!-- 购买成功 -->
    <view class="buy-suc" @touchmove.prevent="">
      <u-popup
        :show="buySuccess"
        :round="30"
        mode="center"
        @close="close"
        @open="open"
      >
        <!-- buySuccess -->
        <view class="buy_success">
          <view class="content">
            <view
              class="header_img"
              style="width: 220rpx; height: 180rpx; margin: auto;"
            >
              <image
                style="width: 100%; height: 100%;"
                src="/static/buy_success.png"
              ></image>
            </view>
            <view class="content_text">
              恭喜您，购买成功！
            </view>
            <view class="content_text2">
              可到「我的藏品」查看您的全部藏品。
            </view>
            <!-- <view
              class="qrcode"
              style="width: 256rpx; height: 256rpx; margin: 40rpx auto;"
            >
              <image
                style="width: 100%; height: 100%;"
                src="../../static/qrcode.jpg"
              ></image>
            </view> -->
            <view class="close_btn" @click="closeSuccess()">
              <button>立即查看</button>
            </view>
          </view>
          <!-- 关闭按钮 -->
          <view class="box-close" @click.stop="close">
            <image src="/static/close.png" mode="scaleToFill" />
          </view>
        </view>
      </u-popup>
    </view>
    <!-- H5登录弹窗 -->
    <loginPop ref="loginPop" @stop="onStopMove"></loginPop>
    <!-- 关注弹窗 -->
    <followPop ref="followPop" @stop="onStopMove"></followPop>
    <!-- 取消关注弹窗 -->
    <cancelPop ref="cancelPop" @stop="onStopMove"></cancelPop>
    <!-- 取消订单弹窗 -->
    <cancelOrder
      @stop="onStopMove"
      ref="cancelOrder"
      :order_id="orderInfo.id"
      @handleChange="cancelSuccess()"
    ></cancelOrder>
    <!-- 分享海报 -->
    <view class="share" @touchmove.prevent="">
      <u-popup
        :show="showPoster"
        :round="30"
        mode="center"
        @close="close"
        @open="open"
      >
        <view class="share-src" @click="close">
          <image
            class="share-img"
            @longtap="clickSaveImg"
            @click.stop=""
            :src="canvasImg"
            mode="widthFix"
          />
          <!-- <view class="share-close" @click="close">
            <image src="/static/close.png" mode="scaleToFill" />
          </view> -->
        </view>
      </u-popup>
    </view>
    <!-- 分享提示 -->
    <view class="share-tips" @touchmove.prevent="">
      <u-popup :show="showTips" mode="center" @close="close">
        <view class="share-content" @click="close">
          <view class="share-canvas">
            <view class="share-image" @click.stop="">
              <!-- <image :src="collection_detail.poster_url" mode="heightFix" /> -->
              <image
                :src="canvasImage"
                @load="loadText = '长按图片即可保存海报'"
                mode="heightFix"
              />
            </view>
          </view>
          <view class="share-save">
            <!-- <image
              src="/static/save.png"
              mode="widthFix"
              @click.stop="saveImg"
            /> -->
            <view class="save-text">{{ loadText }}</view>
          </view>
        </view>
        <view class="share-arrow" @click.stop="close">
          <image src="/static/hand.png" mode="widthFix" />
        </view>
        <view class="share-text" @click.stop="close">
          点击右上角“●●●”分享到好友或朋友圈哦~
        </view>
      </u-popup>
    </view>
    <OrderPop ref="OrderPop"></OrderPop>
    <ModalPop ref="ModalPop" @stop="onStopMove"></ModalPop>
    <!-- 查看藏品主文件 -->
    <view class="files">
      <CheckFile @close="checkFileClose" :info="fileInfo" ref="file" />
    </view>
  </view>
</template>

<script>
import jWeixin from '@/node_modules/jweixin-module/lib/index.js'
import pop from '@/components/ming-pop/ming-pop.vue'
import api from '@/request/api.js'
import wxPay from '@/common/wxPay.js'
import CheckFile from '@/pages/details/component/CheckFile.vue'
import BuyPop from '@/pages/details/component/BuyPop.vue'
import followPop from '@/pages/details/component/followPop.vue'
import cancelPop from '@/pages/details/component/cancelPop.vue'
import cancelOrder from '@/pages/details/component/cancelOrder.vue'
import loginPop from '@/components/loginPop.vue'
import ModalPop from '@/components/ModalPop.vue'
import OrderPop from '@/pages/details/component/OrderPop.vue'
import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js'
import timeHMS from '../../common/common.js'
export default {
  data() {
    return {
      statusBarHeight: 0,
      titleBarHeight: 0,
      screenHeight: 0,
      systemWidth: 0, // 屏幕高度比例
      systemHeight: 0,
      showPrice: true, //如果藏品免费
      showShare: false, //藏品分享遮罩
      buySuccess: false, //购买成功遮罩
      show: false, //遮罩
      collectionStatus: '', //按钮状态
      orderInfo: {}, //支付订单详情
      pageColor: '', //背景色
      /* 倒计时*/
      countdownh: '',
      countdownm: '',
      countdowns: '',
      time: '00:00:00',
      timeHMS,
      clockTimer: null, //定义计时器，以便全局访问
      token: '', //登录token
      is_auth: '', //实名信息
      activity_id: '',
      collection_id: '',
      uid: '',
      activity_appointment: '',
      src: 'http://publish.onedaen.com', //图片地址头
      collection_detail: {
        picture_list: {},
      }, //藏品详情
      total_price: 0, //藏品价格
      buyCount: 1, //购买数量
      // 分享菜单列表
      shareList: [
        {
          name: '微信',
          type: 'friend',
        },
        {
          name: '朋友圈',
          type: 'share',
        },
        // {
        //   name: '复制链接',
        // },
        {
          name: '保存图片',
          type: 'save',
        },
      ],
      // 状态列表
      activityList: {
        5: {
          name: '已开始',
          end: '结束',
          start: '正在发行',
          info: 'end_time',
        },
        6: {
          name: '已结束',
          end: '结束',
          start: '活动结束',
          info: 'end_time',
        },
        7: {
          name: '预热中',
          end: '开始',
          start: '即将发行',
          info: 'begin_time',
        },
      },
      showState: false,
      res: '', // px 转化为rpx
      animationData: '', //动画
      imgDeg: 0, //图片旋转角度
      timer: '', //定时器
      direction: 'left',
      bgColor: '',
      collectionStatus: '',
      canvasImg: '', // canvas路径
      shareImg: '', // 分享海报路径
      is_follow: false,
      launch: false,
      launchs: false,
      is_advance: false,
      showCanvas: false,
      showPoster: false,
      loadCanvas: false,
      stopAnimation: false,
      end: false,
      option: {},
      deviation: 0,
      /* 登录 */
      mobile: '',
      verifycode: '',
      checked: false,
      /* 底部提示 */
      login: true,
      verify: false,
      isLogin: true,
      hasLogin: false,
      imgs: '',
      isVerify: false,
      /* 弹窗 */
      showLogin: false,
      showRegister: false,
      src: 'http://publish.onedaen.com',
      canvasImage: '',
      captchaTime: 0, //验证码倒计时
      agreeValue: '', //同意协议
      loadText: '正在生成海报，请稍等片刻',
      mobile: '',
      verifycode: '',
      load: false,
      stopMove: false,
      showTips: false,
      fileInfo: {},
      userInfo: {},
      // 藏品预览图相关
      imgHeight: 0,
      proportion: 0,
      previewStyle: {
        border: '4rpx solid rgba(255, 255, 255, 0.5)',
        transform: 'rotateY(30deg)',
        transformStyle: 'preserve-3d',
        maxWidth: '400rpx',
        maxHeight: '400rpx',
        width: '400rpx',
        height: '400rpx',
      },
      imgStyle: {
        border: '',
        maxWidth: '100%',
        maxHeight: '100%',
        width: '',
        height: '',
      },
      showPlay: false,
      timers: '',
      imgDegs: 0, //图片旋转角度
    }
  },
  components: {
    pop,
    CheckFile,
    BuyPop,
    loginPop,
    followPop,
    cancelPop,
    cancelOrder,
    OrderPop,
    ModalPop,
  },
  onReady() {
    // this.configSDK()
    // 无限循环动画
    // this.timer = setInterval(
    //   function () {
    //     if (this.stopAnimation) return
    //     if (this.direction == 'left') {
    //       this.imgDeg = this.imgDeg + 1
    //       this.direction = this.imgDeg == 390 ? 'right' : 'left'
    //     } else if (this.direction == 'right') {
    //       this.imgDeg = this.imgDeg - 1
    //       this.direction = this.imgDeg == 330 ? 'left' : 'right'
    //     }
    //     this.animationData = `translateY(-15px) rotateY(${this.imgDeg}deg)`
    //   }.bind(this),
    //   100,
    // )
  },
  onUnload() {
    clearInterval(this.timer)
  },
  onLoad(option) {
    let openid = uni.getStorageSync('openid')
    /* 获取当前页面地址 */
    let local = location.href

    const ua = window.navigator.userAgent.toLowerCase()
    this.ua = ua.match(/MicroMessenger/i) == 'micromessenger'
    if (ua.match(/MicroMessenger/i) == 'micromessenger' && openid.length == 0) {
      //是
      this.pageLoad(local)
    } else {
      //不是
    }
    /* 验证是否登录 */
    let hasLogin = uni.getStorageSync('hasLogin')
    this.hasLogin = hasLogin
    const info = uni.getStorageSync('userInfo')
    this.userInfo = info
    console.log(this.hasLogin)
    if (hasLogin == false) {
      this.isLogin = true
    } else if (hasLogin == true && info.is_auth == 1) {
      console.log(111)
      this.isVerify = true
      this.hasLogin = false
      this.isLogin = false
    }
    /* 接收上一页传的参数 */
    let id = option.id
    let activity_id = option.activity_id
    let collection_id = option.collection_id
    this.activity_id = activity_id
    this.collection_id = collection_id

    this.init()
    /* 屏幕高度 */
    uni.getSystemInfo({
      success: (res) => {
        this.screenHeight = res.screenHeight * (750 / res.windowWidth) //将px 转换rpx
      },
    })
    // 从缓存中读取
    let that = this
    uni.getStorage({
      key: 'userInfo',
      success: (res) => {
        this.uid = res.data.uid
        this.token = res.data.token
        this.is_auth = res.data.is_auth
      },
    })
  },
  mounted() {
    this.launchs = true
    this.configSDK()
  },
  onShow() {
    if (!this.launchs) return
    this.configSDK()
  },
  // onShareAppMessage() {
  //   return {
  //     title: this.collection_detail.name,
  //     path: '/pages/index/index',
  //   }
  // },
  // onShareTimeline() {
  //   return {
  //     title: this.collection_detail.name,
  //     query: `activity_id=${this.option.activity_id}&collection_id=${this.option.collection_id}`,
  //     imageUrl: this.canvasImg,
  //   }
  // },
  methods: {
    // 初始化
    async init() {
      const info = uni.getStorageSync('userInfo')
      this.userInfo = info
      // const jWeixin = require('jweixin-module')

      uni.getSystemInfo({
        success: (system) => {
          this.systemWidth = system.windowWidth / 375
          this.systemHeight = system.windowHeight
        },
      })
      this.CollectionDetail()
      // this.createdPoster()
    },
    //实名
    Verify() {
      uni.navigateTo({
        url: '/pages/verify/verify',
      })
    },
    // 网页授权
    pageLoad(href) {
      let openid = uni.getStorageSync('openid')
      this.code = this.GetQueryString('code')
      if (!openid) {
        if (this.code) {
          //直接去登录发起请求
        } else {
          //获取code
          //静默授权
          this.getwx_authorize(href)
        }
        setTimeout(() => {
          this.getOpenid(this.code)
        }, 1000)
      }
    },
    // 获取openid
    getOpenid(code) {
      api
        .getSessionKey({
          js_code: code,
        })
        .then((res) => {
          console.log(res)
          let openid = res.data.h5openid
          if (!openid) {
          } else {
            this.openid = openid
            uni.setStorageSync('openid', openid)
          }
        })
    },
    //拉取授权
    getwx_authorize(href) {
      //授权的回调地址
      let redirect_uri = encodeURIComponent(href)
      //这是我们公众号的appid
      let appid = 'wxc169f5171f0ff8a6'
      //静默授权
      window.location.href =
        'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
        appid +
        '&redirect_uri=' +
        redirect_uri +
        '&response_type=code&scope=snsapi_base&state=123#wechat_redirect' +
        '&t=' +
        new Date().getTime()
      //非静默授权调取下面的这个地址，弹出授权接口，获取到用户信息
      window.location.href =
        'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
        appid +
        '&redirect_uri=' +
        redirect_uri +
        '&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect' +
        '&t=' +
        new Date().getTime()
    },
    //获取url中参数的方法
    GetQueryString(name) {
      var url = window.location.href
      try {
        var cs = url.split('?')[1] //获取?之后的参数字符串
        var cs_arr = cs.split('&') //参数字符串分割为数组
        for (var i = 0; i < cs_arr.length; i++) {
          //遍历数组，拿到json对象
          if (cs_arr[i].split('=')[0] == name) {
            return cs_arr[i].split('=')[1]
          }
        }
        return null
      } catch {
        return null
      }
    },
    async configSDK() {
      // const jWeixin = require('jweixin-module')
      // const src = location.href.split('#')[0]
      // const idx = src.indexOf('?')
      // const url_params = location.href.split('?')[1]
      // let url = encodeURIComponent(location.href)
      // const url = `https://h5.onedaen.com/pages/details/collection_detail?activity_id=${this.activity_id}&collection_id=${this.collection_id}`
      const url = location.href
      const upUrl = encodeURIComponent(url)
      api.shareData({ url: upUrl }).then((res) => {
        jWeixin.config({
          debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的 JS 接口列表
        })

        jWeixin.ready(() => {
          // 分享给朋友
          jWeixin.updateAppMessageShareData({
            title: this.collection_detail.name, // 分享标题
            // desc: this.collection_detail.intro, // 分享描述
            desc: '限时发售，点击进入了解详情。',
            link: res.data.url,
            imgUrl:
              'https://publish.onedaen.com/uploads/publicImg/shareLogo.png', // 分享图标
            success: () => {
              // 设置成功
            },
          })
          // 分享到朋友圈
          jWeixin.updateTimelineShareData({
            title: '限时发售，点击进入了解详情。', // 分享标题
            link: res.data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
            imgUrl: this.collection_detail.cover_url, // 分享图标
            success: () => {
              // 设置成功
            },
          })
        })
      })
    },
    open() {
      this.previewStyle.transform = `translateY(-15px) rotateY(0deg)`
      this.previewStyle.transformStyle = ``
      this.stopAnimation = true
      this.stopMove = true
    },
    // 获取藏品详情
    CollectionDetail(order_id) {
      uni.showLoading({ title: '加载中' })
      /* 获取藏品详情 */
      api
        .getCollectionsDetail({
          /* 新增需传uid */
          activity_id: this.activity_id,
          collection_id: this.collection_id,
          order_id: order_id,
        })
        .then((res) => {
          this.collection_detail = res.data
          this.pageColor = res.data.intro_back
          uni.hideLoading()
          this.bgColor = {
            backgroundImage: `linear-gradient(rgba(255,255,255,0),${this.collection_detail.intro_back})`,
          }
          // 订单详情
          let orderInfo = res.data.order_info
          if (orderInfo.pay_status == 1) {
          } else if (orderInfo.pay_status == -2) {
            this.collectionStatus = '8'
          } else {
            this.orderInfo = orderInfo
          }
          let is_end = res.data.is_end
          if (is_end == 1) {
            this.collectionStatus = '5'
          } else {
            if (res.data.inventory == 0 && res.data.order_info.length == 0) {
              this.collectionStatus = '4'
            } else if (res.data.order_info.length == 0) {
              this.collectionStatus = '1'
              if (res.data.is_toplimit == 1) {
                this.collectionStatus = '7'
              } else {
                let time = res.data.issue_time
                let follow = res.data.is_follow
                this.transferTime(time, follow)
              }
            } else {
              if (res.data.is_toplimit == 1 && res.data.order_info.length > 0) {
                this.collectionStatus = '7'
              } else {
                let endTime = res.data.order_info.end_time
                this.clockTimer = setInterval(() => {
                  //调用定义的事件，进行倒计时操作，传入需要结束的时间戳
                  this.countDown(endTime)
                }, 1000)
                this.collectionStatus = '6'
                this.orderInfo = res.data.order_info
              }
            }
          }
          if (res.data.price == '0.00') {
            this.showPrice = false
          }
          /* 判断该藏品是否已经领取 */
          if (res.data.has_received) {
          }

          // let arr = this.collection_detail.cover_url_more.split(','),
          //   type = arr[0].match(/:(.*?);/)[1],
          //   bstr = atob(arr[1]),
          //   n = bstr.length,
          //   u8arr = new Uint8Array(n)
          // const img = new Blob([u8arr], { type })

          // 获取主文件类型
          this.getFileType()
          // 获取主文件信息
          this.getMainFileInfo()
          // 注入sdk
          // this.configSDK()
          // 创建海报
          // this.createdSharePostrs()
        })
        .catch((err) => {})
    },
    //登录
    Login() {
      this.open()
      this.$refs.loginPop.open()
    },
    checkFileClose() {
      const timer = setTimeout(() => {
        this.previewStyle.transformStyle = `preserve-3d`
        this.stopMove = false
        this.stopAnimation = false
      }, 200)
    },
    //实名
    Verify() {
      uni.navigateTo({
        url: '/pages/verify/verify',
      })
    },
    showMask() {
      this.show = true
    },
    close() {
      this.show = false
      this.showShare = false
      this.stopAnimation = false
      this.stopMove = false
      this.showPoster = false
      this.showTips = false
      this.buySuccess = false
      this.$refs.followPop.close()
      this.$refs.cancelPop.close()
      this.$refs.cancelOrder.close()
      this.$refs.loginPop.close()
      this.previewStyle.transformStyle = `preserve-3d`
    },
    watchClose() {
      this.stopMove = false
    },
    PageBack() {
      let canNavBack = getCurrentPages()
      console.log(canNavBack)
      if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack()
      } else {
        if (canNavBack[0].__page__.route == 'pages/details/collection_detail') {
          uni.switchTab({
            url: '../index/index',
          })
        } else {
          history.back()
        }
      }
    },
    // 动画
    startAnimation() {},
    transferAnimation() {},
    //关注
    advance() {
      const info = uni.getStorageSync('userInfo')
      if (!info.token) {
        this.open()
        this.$refs.ModalPop.open()
        return
      }
      api
        .advanceCollection({
          activity_id: this.activity_id,
        })
        .then((res) => {
          if (res.code == 200) {
            this.open()
            this.$refs.followPop.open()
            // wxlogin.orderMessage()
            // this.getCollectionsDetail()
            this.collectionStatus = '3'
          }
        })
    },
    // 取消关注
    cancelFollow(id) {
      const info = uni.getStorageSync('userInfo')
      if (!info.token) {
        this.open()
        this.$refs.ModalPop.open()
        return
      }
      api
        .cancelFocus({
          follow_id: id,
        })
        .then((res) => {
          if (res.code == 200) {
            this.open()
            this.$refs.cancelPop.open()
            this.collectionStatus = '2'
          }
        })
    },
    // 关注状态判断
    transferTime(time, follow) {
      // const tempTime = new Date(time)
      const tempTime = dayjs(time).valueOf()
      const now = new Date()
      // let date = Date.parse(new Date(time))
      let date = tempTime
      let nowTime = now.getTime()
      // let nowTime = Date.parse(new Date())
      if (date > nowTime && follow == 1) {
        this.collectionStatus = '3'
      } else if (date > nowTime && follow == 0) {
        this.collectionStatus = '2'
      } else if (date < nowTime) {
        this.collectionStatus = '1'
      }
    },

    // 增加数量
    addCount(inventory, limitCount) {
      if (this.buyCount < inventory) {
        if (this.buyCount < limitCount) {
          this.buyCount = this.buyCount + 1
        } else {
          uni.showToast({
            title: '超过限购数量',
            icon: 'error',
          })
        }
      } else {
        uni.showToast({
          title: '超出可购数量',
          icon: 'error',
        })
      }
    },
    // 减少数量
    reduceCount() {
      if (this.buyCount > 1) {
        this.buyCount = this.buyCount - 1
      }
    },
    buy() {
      const info = uni.getStorageSync('userInfo')
      if (!info.token) {
        uni.showToast({
          title: '请登录后购买',
          icon: 'none',
          complete: () => {
            this.open()
            this.$refs.loginPop.open()
          },
        })

        return
      }
      if (info.is_auth == 1) {
        uni.showToast({
          title: '实名认证后购买',
          icon: 'none',
          complete: (res) => {
            this.open()
          },
        })

        return
      }
      this.open()
      // this.previewStyle.transform = `translateY(-15px) rotateY(0deg)`
      // this.previewStyle.transformStyle = ``
      // this.stopAnimation = true
      // this.$refs.pop2.show()
      this.$refs.buys.show()
    },
    watchClose() {
      this.stopAnimation = false
      this.stopMove = false
    },
    buyNow() {
      this.total_price = this.collection_detail.price * this.buyCount
      // 调用微信支付
      api
        .wechatPay({
          activity_id: this.activity_id,
          collect_id: this.collection_id,
          total_price: this.total_price,
          number: this.buyCount,
        })
        .then((res) => {
          if (res.code == 200) {
            let data = res.data
            let orderInfo = res.data.order_info //订单详情
            let createTime = res.data.order_info.create_time
            let endTime = res.data.order_info.end_time
            this.orderInfo = orderInfo
            this.$refs.buys.close()
            wxPay.wexinPay(data, (res) => {
              if (res.status == 1) {
                if (orderInfo.surplus_available_num == 0) {
                  this.collectionStatus = '7'
                } else {
                  this.collectionStatus = '1'
                }
                this.open()
                this.buySuccess = true
                // 清除定时器
                clearInterval(this.clockTimer)
              } else {
                this.clockTimer = setInterval(() => {
                  //调用定义的事件，进行倒计时操作，传入需要结束的时间戳
                  this.countDown(endTime)
                }, 1000)
                let now = dayjs().unix()
                let end = dayjs(endTime).unix()
                if (now < end) {
                  this.collectionStatus = '6'
                  this.open()
                  this.$refs.OrderPop.open(res.msg)
                } else {
                  this.collectionStatus = '8'
                  this.open()
                  this.$refs.OrderPop.open(res.msg)
                }
              }
            })
          } else {
          }
        })
      // this.$refs.pop2.close()
      // this.stopAnimation = false
    },
    // 继续支付
    continuePay() {
      let order_id = this.orderInfo.id
      let price = this.orderInfo.price
      // 调用微信支付
      api
        .wechatPay({
          activity_id: this.activity_id,
          collect_id: this.collection_id,
          total_price: price,
          number: this.buyCount,
          order_id: order_id,
        })
        .then((res) => {
          if (res.code == 200) {
            let data = res.data
            let orderInfo = res.data.order_info //订单详情
            let createTime = res.data.order_info.create_time
            let endTime = res.data.order_info.end_time
            this.orderInfo = orderInfo
            wxPay.wexinPay(data, (res) => {
              if (res.status == 1) {
                if (orderInfo.surplus_available_num == 0) {
                  this.collectionStatus = '7'
                } else {
                  this.collectionStatus = '1'
                }
                this.buySuccess = true
                // 清除定时器
                clearInterval(this.clockTimer)
              } else {
                let now = dayjs().unix()
                let end = dayjs(endTime).unix()
                if (now < end) {
                  this.collectionStatus = '6'
                  this.open()
                  this.$refs.OrderPop.open(res.msg)
                } else {
                  this.collectionStatus = '8'
                  this.open()
                  this.$refs.OrderPop.open(res.msg)
                }
              }
            })
          } else {
            this.stopMove = true
            uni.showModal({
              content: res.message,
              complete: () => {
                this.stopMove = false
              },
            })
          }
        })
    },
    // 取消订单
    cancel() {
      let order_id = this.orderInfo.id
      this.open()
      this.$refs.cancelOrder.open(order_id)
    },
    cancelSuccess() {
      this.collectionStatus = '1'
      clearInterval(this.clockTimer)
    },
    // 更新订单状态
    updateOrder() {
      let order_id = this.orderInfo.id
      this.CollectionDetail(order_id)
    },
    // 倒计时
    // 定义倒计时
    countDown(endTime) {
      //判断倒计时是否为0，如果为零即可清楚计时器
      if (this.timeHMS(endTime) == '00:00:00') {
        clearInterval(this.clockTimer)
        this.collectionStatus = '8'
      }
      this.time = this.timeHMS(endTime)
    },
    closeSuccess() {
      this.buySuccess = false
      uni.navigateTo({
        url: '/pages/mine/My_collection',
      })
    },
    // 查看我的藏品
    myCollection() {
      // uni.navigateTo({
      // 	url: '../mine/My_collection'
      // })
    },
    /* 用户协议 */
    userAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/user_agreement',
      })
    },
    /* 隐私协议 */
    privacyAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/privacy_agreement',
      })
    },
    /* 下拉刷新 */
    onPullDownRefresh() {
      this.CollectionDetail()
      let _this = this
      setTimeout(function () {
        uni.stopPullDownRefresh()
      }, 500)
    },
    // 分享
    async share() {
      uni.showLoading({
        title: '正在生成海报，请稍等片刻',
      })
      const info = await api.sharePoster({
        collect_id: this.collection_id,
      })
      uni.hideLoading()
      this.canvasImage = info.data.poster_url
      this.showTips = true

      this.open()
      // uni.showToast({
      //   title: '请使用浏览器分享功能分享',
      //   icon: 'none',
      // })
      return
      if (!this.load) {
        await this.createdSharePostrs()
      } else {
        uni.showLoading({
          title: '正在生成海报',
          mask: true,
          icon: 'none',
        })
        const timer = setTimeout(() => {
          if (this.load) {
            uni.hideLoading()
            this.showPoster = true
            // uni.showShareImageMenu({
            //   path: this.canvasImg,
            //   complete: (res) => {
            //     uni.hideLoading()
            //     clearTimeout(timer)
            //   },
            // })

            // uni.canvasToTempFilePath({
            //   // 这里修改保存的图片格式
            //   fileType: 'jpg',
            //   canvasId: 'share',
            //   quality: 1,
            //   success: (res) => {
            //     // 保存带哦本地
            //     uni.showShareImageMenu({
            //       path: this.canvasImg,
            //     })
            //   },
            //   complete: (res) => {
            //     uni.hideLoading()
            //     clearInterval(timer)
            //   },
            // })
          }
        }, 500)
      }
    },
    // 分享海报
    sharePosters(type) {
      uni.canvasToTempFilePath({
        // 这里修改保存的图片格式
        fileType: 'jpg',
        canvasId: 'share',
        quality: 1,
        success: (res) => {
          // 保存带哦本地
          uni.showShareImageMenu({
            path: res.tempFilePath,
          })
        },
      })
    },
    //保存至相册imgUrl
    clickSaveImg() {
      uni.saveImageToPhotosAlbum({
        //保存图片到相册
        filePath: this.canvasImg, //生成图片临时路径
        success: function () {
          uni.showToast({
            title: '图片已保存至相册！',
            duration: 2000,
          })
        },
      })
      // uni.showModal({
      //   title: '提示',
      //   content: '是否保存海报到相册',
      //   showCancel: true,
      //   success: ({ confirm, cancel }) => {
      //     if (confirm) {

      //     }
      //   },
      // })
    },
    shareFriend() {
      wx.canvasToTempFilePath({
        //将canvas生成图片
        canvasId: 'myCanvas',
        x: 0,
        y: 0,
        width: 370,
        height: 472,
        success: function (res) {
          let urls = res.tempFilePath //图片临时路径
          wx.showShareImageMenu({
            //分享给朋友
            path: urls,
            success: (res) => {},
            fail: (err) => {
              wx.showToast({
                title: '分享失败',
                duration: 2000,
              })
            },
          })
        },
      })
    },
    // 长按保存海报
    saveSharePic() {
      this.stopMove = true
      uni.showModal({
        title: '提示',
        content: '确定要保存分享海报吗？',
        success: function (res) {
          if (res.confirm) {
            // canvas生成图片
            uni.canvasToTempFilePath({
              // 这里修改保存的图片格式
              fileType: 'jpg',
              canvasId: 'share',
              quality: 1,
              success: function (res) {
                // 保存带哦本地
                uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: function () {
                    uni.showToast({
                      title: '保存海报成功',
                      icon: 'none',
                      duration: 3000,
                    })
                  },
                  fail: function () {
                    uni.showToast({
                      title: '保存海报失败',
                      icon: 'none',
                      duration: 3000,
                    })
                  },
                })
              },
            })
          }
        },
        complete: () => {
          this.stopMove = false
        },
      })
    },
    // canvas 文字换行
    getTextInfo(canvas, str, size, width) {
      const getRpx = new Promise((resolve, reject) => {
        uni.getSystemInfo({
          success: (system) => {
            resolve(system.windowWidth / 375)
          },
        })
      })
      return getRpx.then((rpx) => {
        // 画布总宽度 rpx单位
        const canvasWidth = width * rpx
        // 字体大小 rpx单位
        let fontSize = parseInt(size * rpx)
        const tempArr = []
        for (let i = 0; i < str.length; i++) {
          const font = str.slice(i, i + 1)
          tempArr.push(font)
        }
        let rowFontNum = 0
        tempArr.reduce((now, next, index) => {
          const fontWidth = canvas.measureText(next).width * rpx
          now = now + fontWidth
          rowFontNum = canvasWidth > now ? index + 1 : rowFontNum
          return now
        }, 0)

        // 每行所需字数 = 画布总宽度 / 单个字体大小
        // let rowFontNum = Math.floor(canvasWidth / fontSize)

        // 字符串总长度
        let strLength = str.length
        // 所需行数 = 字符总长度 / 每行所需字数
        let rows = Math.ceil(strLength / rowFontNum)
        // 行高

        return {
          canvasWidth,
          fontSize,
          rowFontNum,
          strLength,
          rows,
        }
      })
    },
    // 生成海报
    // 生成分享海波啊
    async createdSharePostrs() {
      if (this.launch) return
      uni.showLoading({
        title: '正在生成海报',
        mask: true,
        icon: 'none',
      })
      this.launch = true
      const day = new Date()
      const time = new Date(this.collection_detail.issue_time)
      const rpx = parseFloat(this.systemWidth.toFixed(2))
      const context = uni.createCanvasContext('share', this)
      context.setTextAlign('center')
      // 背景色
      context.rect(0 * rpx, 50 * 0, 650 * rpx, 1100 * rpx)
      context.setFillStyle('#fff')
      context.fill()
      // 藏品名称
      context.setTextAlign('left')
      const name = await this.getTextInfo(
        context,
        this.collection_detail.name,
        18,
        160,
      )
      context.setFontSize(name.fontSize)
      context.setFillStyle('#000')
      // context.fillText(this.collection_detail.name, 22.5 * rpx, 360 * rpx)
      for (let i = 0; i <= name.rows; i++) {
        context.fillText(
          this.collection_detail.name.slice(
            name.rowFontNum * (i - 1),
            name.rowFontNum * i,
          ),
          22.5 * rpx,
          (335 + i * 23) * rpx,
        )
      }
      let lineHeight =
        name.rows - 1 >= 2 ? (name.rows - 1) * 21 : (name.rows - 1) * 20
      this.deviation = lineHeight * 2
      lineHeight = name.rows - 1 == 3 ? 67 : lineHeight
      // 小程序码
      const code = new Promise((resolve, reject) => {
        let imgs = new Image()
        imgs.id = 'imgs'
        // imgs.setAttribute('crossOrigin', 'anonymous')

        // imgs.onload = (e) => {
        //   context.drawImage(
        //     imgs,
        //     230 * rpx,
        //     (425 + lineHeight) * rpx,
        //     64 * rpx,
        //     64 * rpx,
        //   )
        //   let url = context.toDataURL('image/png')

        //   // const result = e.target.result
        //   // const temp = document.querySelectorAll('#imgs')

        //   // 长按识别
        //   context.setTextAlign('left')
        //   context.setFontSize(10 * rpx)
        //   context.setFillStyle('#999')
        //   context.fillText(
        //     '长按识别，期待与您',
        //     218 * rpx,
        //     (505 + lineHeight) * rpx,
        //   )
        //   context.fillText(
        //     '一起见证本次活动!',
        //     220 * rpx,
        //     (520 + lineHeight) * rpx,
        //   )
        //   context.draw(true)
        //   resolve()
        // }
        // imgs.src =
        //   'https://publish.onedaen.com/uploads/material/picture/code.jpg'
        uni.downloadFile({
          url: '/uploads/material/picture/code.jpg',
          success: (res) => {
            context.drawImage(
              // res.tempFilePath,
              this.imgs,
              230 * rpx,
              (425 + lineHeight) * rpx,
              64 * rpx,
              64 * rpx,
            )
            // 长按识别
            context.setTextAlign('left')
            context.setFontSize(10 * rpx)
            context.setFillStyle('#999')
            context.fillText(
              '长按识别，期待与您',
              218 * rpx,
              (505 + lineHeight) * rpx,
            )
            context.fillText(
              '一起见证本次活动!',
              220 * rpx,
              (520 + lineHeight) * rpx,
            )
            context.draw(true)
            resolve()
          },
        })
      })
      // 预览图
      const preview = new Promise((resolve, reject) => {
        uni.downloadFile({
          url: this.collection_detail.cover_url,
          // 发行时间背景
          success: (res) => {
            // const day = new Date()

            context.drawImage(
              res.tempFilePath,
              0 * rpx,
              0 * rpx,
              325 * rpx,
              325 * rpx,
            )

            context.beginPath()
            context.moveTo(3 * rpx, 300 * rpx)
            context.arcTo(193 * rpx, 300 * rpx, 193 * rpx, 325 * rpx, 3 * rpx)
            context.lineTo(193 * rpx, 325 * rpx)
            context.lineTo(0 * rpx, 325 * rpx)
            context.arcTo(0 * rpx, 300 * rpx, 193 * rpx, 300 * rpx, 3 * rpx)
            context.setStrokeStyle('rgba(0, 0, 0, 0.8)')
            context.fillStyle = 'rgba(0, 0, 0, 0.8)'
            context.fill()
            context.stroke()
            context.setFontSize(12 * rpx)
            context.setFillStyle('#fff')
            context.setTextAlign('center')
            const timeName = this.activityList[
              this.collection_detail.activity_type
            ].info
            context.fillText(
              `${
                this.activityList[this.collection_detail.activity_type].start
              } | ${this.collection_detail.activity_info[timeName]} ${
                this.activityList[this.collection_detail.activity_type].end
              }`,
              95 * rpx,
              317 * rpx,
            )
            context.draw(true)
            resolve()
          },
        })
      })
      // 智信链logo
      const logo = new Promise((resolve, reject) => {
        // https://publish.onedaen.com/uploads/material/picture/zxl_yde.png
        uni.downloadFile({
          url:
            'https://publish.onedaen.com/uploads/material/picture/zxl_yde.png',
          success: (res) => {
            context.drawImage(
              res.tempFilePath,
              20 * rpx,
              (495 + lineHeight) * rpx,
              130 * rpx,
              25 * rpx,
            )
            context.draw(true)
            resolve()
          },
        })
      })
      // 发行商头像
      const avatar = new Promise((resolve, reject) => {
        uni.downloadFile({
          url: this.collection_detail.brand_info.icon_image,
          // url:
          //   'https://publish.onedaen.com/uploads/material/23-01-10/167335547224141.png',
          success: (res) => {
            context.beginPath()
            context.arc(
              32.5 * rpx,
              (422.5 + lineHeight) * rpx,
              12.5 * rpx,
              0,
              2 * Math.PI,
            )
            context.setStrokeStyle('rgba(0,0,0,1)')
            // context.setLineWidth(10)

            // context.setShadow(0, 0, 1, '#fff')
            context.save()
            context.clip()
            context.stroke()
            context.drawImage(
              res.tempFilePath,
              20 * rpx,
              (410 + lineHeight) * rpx,
              25 * rpx,
              25 * rpx,
            )

            context.draw(true)
            context.restore()
            resolve()
          },
        })
      })

      // 限量
      context.beginPath()
      context.moveTo(22 * rpx, (380 + lineHeight) * rpx)
      context.lineTo(60 * rpx, (380 + lineHeight) * rpx)
      context.lineTo(60 * rpx, (400 + lineHeight) * rpx)
      context.arcTo(
        20 * rpx,
        (400 + lineHeight) * rpx,
        20 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        20 * rpx,
        (380 + lineHeight) * rpx,
        22 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.setStrokeStyle('#53A8E8')
      context.fillStyle = '#53A8E8'
      context.fill()
      context.stroke()
      context.setFontSize(12 * rpx)
      context.setFillStyle('#fff')
      context.setTextAlign('center')

      context.fillText('限量', 40 * rpx, (394 + lineHeight) * rpx)
      this.collection_detail.show_number =
        this.collection_detail.show_number + ''
      const countLength = this.collection_detail.show_number.length - 1 + ''
      const countWidth = parseInt((100 + countLength * 7) * rpx)

      // 发行数量
      context.beginPath()
      context.moveTo(60 * rpx, (380 + lineHeight) * rpx)
      context.arcTo(
        countWidth,
        (380 + lineHeight) * rpx,
        countWidth,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        countWidth,
        (400 + lineHeight) * rpx,
        60 * rpx,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.lineTo(60 * rpx, (400 + lineHeight) * rpx)
      context.setStrokeStyle('#53A8E8')
      context.stroke()
      context.setFontSize(12 * rpx)
      context.setFillStyle('#53A8E8')
      context.fillText(
        `${this.collection_detail.show_number}份`,
        60 * rpx + (countWidth - 60 * rpx) / 2,
        (394 + lineHeight) * rpx,
      )

      this.collection_detail.collect_type_count =
        this.collection_detail.collect_type_count + ''
      const collectionLength =
        this.collection_detail.collect_type_count.length - 1
      const collectionWidth = parseInt(
        countWidth + (50 + collectionLength * 6 * rpx),
      ) // 150

      // 藏品款数
      context.beginPath()
      context.moveTo(countWidth + 12 * rpx, (380 + lineHeight) * rpx)
      context.arcTo(
        collectionWidth,
        (380 + lineHeight) * rpx,
        collectionWidth,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        collectionWidth,
        (400 + lineHeight) * rpx,
        countWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        countWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        countWidth + 10 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        countWidth + 10 * rpx,
        (380 + lineHeight) * rpx,
        countWidth + 12 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.setStrokeStyle('#000')
      context.fillStyle = '#000'
      context.fill()
      context.stroke()
      context.setFontSize(12 * rpx)
      context.setFillStyle('#fff')
      context.fillText(
        `共${this.collection_detail.collect_type_count}款`,
        countWidth + 10 * rpx + (collectionWidth - (countWidth + 10 * rpx)) / 2,
        (394 + lineHeight) * rpx,
      )

      // 标签

      const flagLength = this.collection_detail.flag.length - 1
      const flagWidth = parseInt(collectionWidth + (40 + flagLength * 10 * rpx)) // 200
      context.beginPath()
      context.moveTo(collectionWidth + 12 * rpx, (380 + lineHeight) * rpx)
      context.arcTo(
        flagWidth,
        (380 + lineHeight) * rpx,
        flagWidth,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        flagWidth,
        (400 + lineHeight) * rpx,
        collectionWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        collectionWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        collectionWidth + 10 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        collectionWidth + 10 * rpx,
        (380 + lineHeight) * rpx,
        collectionWidth + 12 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.setStrokeStyle('rgba(0,0,0,0)')

      const color = context.createLinearGradient(
        collectionWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        flagWidth,
        (400 + lineHeight) * rpx,
      ) //(起始点坐标x,起始点坐标y，结束点坐标x,结束点坐标y)
      color.addColorStop(0, '#d8a0d8') //起点位置的颜色
      color.addColorStop(0.41, '#a4bbe5') //中间点位置的颜色
      color.addColorStop(1, '#cdffd7') //终点位置的颜色
      context.fillStyle = color
      context.fill()
      context.stroke()
      context.setFontSize(12 * rpx)
      context.setFillStyle('#000')
      // context.fillText(
      //   this.collection_detail.flag,
      //   collectionWidth + 18 * rpx,
      //   (394 + lineHeight) * rpx,
      // )
      const startFlag = collectionWidth + 10 * rpx
      context.fillText(
        this.collection_detail.flag,
        startFlag + (flagWidth - startFlag) / 2,
        (394.5 + lineHeight) * rpx,
      )

      // 发行商名称
      context.setTextAlign('left')
      context.setFontSize(15 * rpx)
      context.setFillStyle('#666666')
      context.fillText(
        this.collection_detail.brand_info.brand_name,
        60 * rpx,
        (428 + lineHeight) * rpx,
      )
      context.save()
      context.draw(true)
      uni.canvasToTempFilePath({
        // 这里修改保存的图片格式
        fileType: 'jpg',
        canvasId: 'share',
        quality: 1,
        success: (res) => {
          this.load = true
          this.canvasImg = res.tempFilePath
          uni.hideLoading()
          this.share()
        },
      })
      Promise.all([code, preview, logo, avatar]).then(() => {
        // uni.canvasToTempFilePath({
        //   // 这里修改保存的图片格式
        //   fileType: 'jpg',
        //   canvasId: 'share',
        //   quality: 1,
        //   success: (res) => {
        //     this.canvasImg = res.tempFilePath
        //     this.load = true
        //     uni.hideLoading()
        //     this.share()
        //   },
        // })
      })
    },
    // 打开藏品主文件
    openFile() {
      const idx = this.collection_detail.medium_url.lastIndexOf('.') + 1
      const type = this.collection_detail.medium_url.substr(idx).toLowerCase()

      this.fileInfo = {
        url: this.collection_detail.medium_url,

        type,
        icon: this.collection_detail.cover_url,
      }

      this.$nextTick(() => {
        this.stopAnimation = true
        // this.animationData = `translateY(-15px) rotateY(360deg)`
        // this.stopAnimation = true
        this.previewStyle.transform = `translateY(-15px) rotateY(0deg)`
        this.previewStyle.transformStyle = ``
        this.$refs.file.open()
      })
    },
    // 跳转实名认证
    goAuth() {
      uni.showToast({
        title: '请前往小程序进行实名认证',
        icon: 'none',
      })
    },
    // 获取主文件信息
    getMainFileInfo() {
      uni.getImageInfo({
        src: this.collection_detail.cover_url,
        success: (image) => {
          console.log('image', image)
          const proportion = image.width / image.height // 图片比例
          const scale = image.width / 400
          this.imgHeight = image.height / scale
          this.imgWidth = image.width
          this.proportion = proportion
          // this.previewStyle.border =
          //   (proportion >= 0.9 && proportion <= 1.1) || !proportion
          //     ? '4px solid rgba(255, 255, 255, 0.5'
          //     : ''
          this.previewStyle.border = ''
          this.imgStyle.border =
            (proportion >= 0.9 && proportion <= 1.1) || !proportion
              ? '12rpx solid rgba(255, 255, 255, 0.5)'
              : ''
          this.imgStyle.width =
            (proportion >= 0.9 && proportion <= 1.1) || !proportion
              ? `${proportion * 400}rpx`
              : `${proportion * 400}rpx`
          this.imgStyle.height =
            (proportion >= 0.9 && proportion <= 1.1) || !proportion
              ? `${this.imgHeight}rpx`
              : `${this.imgHeight}rpx`
          this.previewStyle.width = `${proportion * 400}rpx`
          this.previewStyle.height = `${this.imgHeight}rpx`
          clearInterval(this.timers)
          this.move()
        },
      })
    },
    // 旋转动画
    move() {
      // return
      this.timers = setInterval(() => {
        if (this.stopAnimation) {
          this.imgDegs = 0
          return
        }
        if (this.stopMove) {
          this.previewStyle.transform = `translateY(-15px) rotateY(0deg)`
          this.imgDegs = 0
          return
        }
        // return
        if (this.direction == 'left') {
          this.imgDegs = this.imgDegs + 1
          this.direction = this.imgDegs == 30 ? 'right' : 'left'
        } else if (this.direction == 'right') {
          this.imgDegs = this.imgDegs - 1
          this.direction = this.imgDegs == -30 ? 'left' : 'right'
        }

        this.previewStyle.transform = `translateY(-15px) rotateY(${this.imgDegs}deg)`
      }, 100)
    },
    // 判断文件类型
    getFileType() {
      const idx = this.collection_detail.medium_url.lastIndexOf('.')
      const type = this.collection_detail.medium_url
        .substr(idx + 1)
        .toLowerCase()

      const video =
        'mpeg,avi,navi,asf、mov、3gp、wmv、divx、xvid、rm、rmvb、flv,f4v,mp4,m4v,mkv'
      const audio =
        'mp3,mpeg,wave,cd,wav,mpeg-4,aiff,wma,midi,amr,flag,ape,oggvorbis,realaudio,vqf,aac'
      // 音视频类型
      if (video.indexOf(type) != -1 || audio.indexOf(type) != -1) {
        this.showPlay = true
      } else {
        this.showPlay = false
      }
    },
    onStopMove() {
      setTimeout(() => {
        this.stopAnimation = false
        this.stopMove = false
        this.previewStyle.transformStyle = `preserve-3d`
      }, 500)
    },
  },
}
</script>

<style lang="scss">
/* show_image */
.this_detail {
  padding-bottom: 1px;
}
.preview-box {
  // @include center;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-15px) rotateY(300deg);
  width: 400rpx;
  height: 400rpx;
  // box-sizing: border-box;
  color: #fff;
  border-radius: 10rpx;
  transition: 0.1s;
  position: relative;
  img {
    pointer-events: none;
  }

  .con1 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 20rpx;
  }

  .con2 {
    background-color: rgba(0, 0, 0, 1);
    transform: translateZ(-40rpx);
    border-radius: 20rpx;
  }

  .con3 {
    width: 38rpx;
    height: 192rpx;
    // top: 4px;
    background-color: rgba(0, 0, 0, 1);
    transform: rotateY(90deg) translateX(22rpx);
  }

  .con4 {
    width: 38rpx;
    background-color: rgba(0, 0, 0, 1);
    transform: rotateY(-90deg) translateX(-20rpx) translateZ(20rpx);
    left: 95%;
  }

  .con5 {
    height: 20rpx;
    width: 200rpx;
    background-color: rgba(0, 0, 0, 1);
    transform: rotateX(90deg) translateY(-20rpx);
    left: 5%;
  }

  .con6 {
    height: 20px;
    width: 200px;
    background-color: rgba(0, 0, 0, 1);
    transform: rotateX(90deg) translateY(-20rpx);
    top: 100%;
  }

  .rectangle {
    max-height: 400rpx;
    max-width: 400rpx;
  }

  .preview-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }
  .preview-null {
    height: 400rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  view {
    width: 400rpx;
    height: 400rpx;
    text-align: center;
    box-sizing: border-box;
    font-size: 50rpx;
    font-weight: bolder;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    /* 设置透明度 */
    opacity: 0.7;
    box-shadow: 0 0 10rpx rgb(100, 99, 99);
  }

  // transform: translateY(-15px) rotateY(360deg);
  // transform-style: preserve-3d;
  image {
    border-radius: 20rpx;
    // max-width: 100%;
    // max-height: 100%;
    // border: 4px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
  }
}

.big_img {
  width: 100%;
  height: calc(1865rpx / 2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  .big-bg {
    position: absolute;
    left: 0;
    top: 0;
  }

  .sale_time {
    position: absolute;
    bottom: -5rpx;
    left: 30rpx;
    width: 330rpx;
    height: 60rpx;
    line-height: 50rpx;
    text-align: center;
    border-radius: 10rpx;
    font-size: 24rpx;
    color: #ffffff;
  }

  .back_btn {
    position: fixed;
    top: 50rpx;
    left: 30rpx;
    width: 56rpx;
    height: 56rpx;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .share_btn {
    position: absolute;
    top: 50rpx;
    right: 30rpx;
    width: 56rpx;
    height: 56rpx;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 100%;
    z-index: 1;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .gradient {
    position: absolute;
    width: 750rpx;
    left: 0;
    bottom: 0;
    height: 60rpx;
    background-image: linear-gradient();
  }

  image {
    width: 100%;
    height: 100%;
  }

  // 藏品图
  .collectionImg_box {
    position: absolute;
    top: 250rpx;
    // left: 195rpx;
    width: 365rpx;
    height: 365rpx;
    border: 1px solid #fff;
    border-radius: 20rpx;
    // transition: 0.1s;
    // transform-style: preserve-3d;
    transform: translateY(-15px) rotateY(0deg);

    .collectionImg {
      width: 350rpx;
      height: 350rpx;
      margin: 5rpx auto;
      background-color: rgba(229, 230, 231, 0.5);
      border-radius: 20rpx;

      image {
        width: 335rpx;
        height: 335rpx;
        border-radius: 20rpx;
        margin: 8rpx;
      }
    }
  }
}

.detail_content {
  width: 90%;
  left: 5%;
  padding-top: 40rpx;
  position: relative;
  margin-bottom: 250rpx;

  .goods_detail {
    min-height: 250rpx;
    width: 100%;
    padding: 28rpx 24rpx 22rpx;
    margin-top: -120rpx;
    background-color: #242424;
    border-radius: 20rpx;
    box-sizing: border-box;

    .goods_title {
      word-break: break-all;
      font-family: PingFang-SC-Medium;
      font-size: 36rpx;
      color: #ffffff;
    }

    /* 发行数量 */
    .content_countBox {
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      margin-top: 30rpx;
      height: 40rpx;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #4d4d4d;
      align-items: center;

      .two_box {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        height: 40rpx;

        .count {
          display: flex;
          align-items: center;
          letter-spacing: 1rpx;
          background-color: #53a8e8;
          border: 1rpx solid #53a8e8;
          padding-left: 10rpx;
          height: 40rpx;
          line-height: 40rpx;
          color: #fff;
          border-radius: 5rpx;
          overflow: hidden;

          .total {
            text-align: center;
            line-height: 40rpx;
            height: 40rpx;
            font-weight: bold;
          }

          .models {
            text-align: center;
            height: 40rpx;
            line-height: 40rpx;
            padding: 0 15rpx;
            // border-radius: 5rpx;
            margin-left: 10rpx;
            background-color: #242424;
            color: #53a8e8;
          }
        }

        .types {
          margin-left: 20rpx;
          padding: 0 11rpx;
          height: 40rpx;
          text-align: center;
          background-image: linear-gradient(
              102deg,
              #d8a0d8 0%,
              #a4bbe5 41%,
              #cdffd7 100%
            ),
            linear-gradient(#181816, #181816);
          background-blend-mode: normal, normal;
          line-height: 40rpx;
          border-radius: 5rpx;
        }
      }

      /* 价格 */
      .price {
        color: #4efffe;
        // font-size: 20rpx;
        // font-style: italic;
        font-weight: bold;
      }
    }
  }

  .goods_host {
    display: flex;
    justify-content: space-between;
    margin-top: 25rpx;

    .host {
      display: flex;

      .host_logo {
        width: 60rpx;
        height: 60rpx;
        border-radius: 30rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }
    }

    text {
      font-family: PingFang-SC-Medium;
      font-size: 30rpx;
      line-height: 60rpx;
      margin-left: 20rpx;
      color: #cccccc;
      vertical-align: middle;
    }
  }

  .nft_notice {
    width: 100%;
    box-sizing: border-box;
    background-color: #242424;
    border-radius: 20rpx;
    margin-top: 30rpx;
    padding: 38.5rpx 24rpx;

    .title {
      font-size: 30rpx;
      color: #babcbb;
      line-height: 100%;
      margin-bottom: 35rpx;
    }

    .notice_img {
      height: 100rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .collection_describe {
    width: 100%;
    height: fit-content;
    background-color: #242424;
    border-radius: 20rpx;
    margin-top: 30rpx;
    box-sizing: border-box;
    padding: 35rpx 24rpx;
  }

  .special_notice {
    width: 100%;
    box-sizing: border-box;
    height: fit-content;
    background-color: #242424;
    border-radius: 20rpx;
    margin-top: 30rpx;
    text-align: center;
    padding: 20rpx 0;
    .describe {
      margin: 0;
      view {
        display: inline-block;
        text-align: justify;
        text-align-last: left;
        word-wrap: break-word;
        word-break: normal;
        white-space: pre-wrap;
        text-justify: inter-ideograph;
      }
    }
  }

  .equity_describe {
    width: 100%;
    box-sizing: border-box;
    background-color: #242424;
    border-radius: 20rpx;
    margin-top: 30rpx;
    text-align: center;
    padding: 20rpx 0;
    .describe {
      display: inline-block;
      text-align: justify;
      text-align-last: left;
      word-wrap: break-word;
      word-break: normal;
      white-space: pre-wrap;
      text-justify: inter-ideograph;
    }
  }

  .footer {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: #242424;
    display: flex;
    flex-direction: column;
    align-items: center;

    .footer-tip {
      width: 100%;
      padding: 22rpx 32.5rpx;
      display: flex;
      box-sizing: border-box;
      color: #fff;
      font-size: 22rpx;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2rpx solid #4d4d4d;

      // padding: 22rpx 0;
      .footer-btn {
        width: 125rpx;
        height: 43rpx;
        border-radius: 21.5rpx;
        background-color: #4ffffe;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
      }
    }

    .To_buy {
      width: 100%;
      padding: 20rpx 32.5rpx;

      box-sizing: border-box;

      .exhausted {
        background-color: #232428;
        background-image: none;
        color: #fff;
        border: 1px solid #f2f2f2;
      }

      .buying {
        position: relative;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        background-color: rgb(115, 115, 115);
        font-family: PingFang-SC-Medium;
        font-size: 28rpx;
        border-radius: 40rpx;

        .cancel {
          height: 80rpx;
          line-height: 80rpx;
          font-weight: bold;
          color: #fff;
          background-color: rgb(97, 97, 97);
          padding: 0 20rpx;
        }

        .continue {
          height: 80rpx;
          line-height: 80rpx;
          background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
            linear-gradient(#dcb71a, #dcb71a);
          background-blend-mode: normal, normal;
          font-weight: bold;
          color: #000;
          border-radius: 0 40rpx 40rpx 0rpx;
          padding: 0 20rpx;
        }

        .overplus_time {
          width: 250rpx;
          display: flex;
          flex-direction: column;
          font-size: 24rpx;
          text-align: center;
          line-height: 25rpx;
          margin: 15rpx 0;
          padding-left: 30rpx;
        }
      }

      .overTime {
        position: relative;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        background-color: rgb(115, 115, 115);
        font-family: PingFang-SC-Medium;
        font-size: 28rpx;
        border-radius: 40rpx;
        .overTime_text {
          font-weight: bold;
          color: #fff;
          font-size: 30rpx;
          text-align: left;
          padding-left: 30rpx;
        }
        .confirm {
          background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
            linear-gradient(#dcb71a, #dcb71a);
          background-blend-mode: normal, normal;
          font-weight: bold;
          color: #000;
          border-radius: 0 40rpx 40rpx 0rpx;
          padding: 0 40rpx;
        }
      }
      button {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
          linear-gradient(#dcb71a, #dcb71a);
        background-blend-mode: normal, normal;
        color: #000;
        font-family: PingFang-SC-Medium;
        font-size: 26rpx;
        border-radius: 40rpx;
      }
    }

    .footer-end {
      button {
        background-color: #737373;
        background-image: none;
      }
    }
  }
}

.buy {
  position: relative;

  .buy_content {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: auto;
    overflow: hidden;
    .buy_header {
      display: flex;
      // padding: 40rpx 0 20rpx;
      padding-top: 36rpx;
      margin-bottom: 25rpx;
      // border-bottom: 4rpx solid #f2f2f2;
      // margin-top: 50rpx;
      .things_img {
        width: 204rpx;
        height: 204rpx;

        // background-color: #4e4e4e;

        // margin: 20rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20rpx;
        border: 2rpx solid #484848;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }

      .buy-box {
        margin-left: 30rpx;
        .header_text {
          display: flex;
          align-items: center;
          .price {
            padding: 25rpx 0;

            text {
              font-family: PingFang-SC-Medium;
              font-size: 20rpx;
              line-height: 24rpx;
            }

            font-family: PingFang-SC-Medium;
            font-size: 40rpx;
            font-weight: bold;
            line-height: 24rpx;
          }
          .buy-price {
            margin-right: 20rpx;
          }
          .stock {
            font-family: PingFang-SC-Regular;
            font-size: 26rpx;
            line-height: 24rpx;
            color: #808080;
            padding: 20rpx 0;
          }
        }
        .limit {
          font-family: PingFang-SC-Regular;
          font-size: 26rpx;
          line-height: 24rpx;
          color: #808080;
          padding: 15rpx 0;
        }
      }
    }

    .type {
      padding: 30rpx 0;
      border-bottom: 4rpx solid #f2f2f2;

      .type_title {
        font-family: PingFang-SC-Medium;
        font-size: 30rpx;
      }

      .type_select {
        display: flex;
        margin-top: 20rpx;

        .select_box {
          width: 180rpx;
          height: 65rpx;
          background-color: #f8f8f8;
          border-radius: 10rpx;
          border: solid 1rpx #b2b2b2;
          text-align: center;
          line-height: 65rpx;
          font-size: 30rpx;
        }

        .selected {
          background-color: #fdfff6 !important;
          border: solid 1rpx #eac303 !important;
          font-family: PingFang-SC-Medium;
          color: #eac303;
        }
      }
    }

    .count {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // height: 125rpx;
      // border-bottom: 4rpx solid #f2f2f2;

      .count_title {
        display: flex;
        align-items: center;
        // line-height: 125rpx;

        text {
          font-family: PingFang-SC-Medium;
          font-size: 30rpx;
        }

        .limit_box {
          font-family: PingFang-SC-Medium;
          font-size: 18rpx;
          color: #ffffff;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 10rpx;
          line-height: 100%;
          width: 105rpx;
          height: 40rpx;
          background-color: #ffb311;
          border-radius: 17rpx;
        }
      }

      .change_count {
        display: flex;
        line-height: 125rpx;
        // margin: 33rpx 0;
        text-align: center;
        .reduce {
          margin-right: 2rpx;
        }
        .add {
          margin-left: 2rpx;
        }
        button {
          height: 60rpx;
          line-height: 60rpx;
          font-size: 30rpx;
          vertical-align: middle;
          background-color: #ededed;
          border-radius: 10rpx;
          border: 0;
        }

        input {
          width: 70rpx;
          height: 60rpx;
          background-color: #ededed;
          border-radius: 10rpx;
          line-height: 60rpx;
        }
      }
    }

    .buy_now {
      width: 400rpx;
      margin: 200rpx auto 20rpx;

      button {
        line-height: 80rpx;
        font-size: 26rpx;
        color: #ffffff;
        height: 81rpx;
        font-weight: 600;

        // background-color: #eac303;
        background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
          linear-gradient(#dcb71a, #dcb71a);
        color: #000;
        height: 80rpx;
        border-radius: 40rpx;
        border: 0;
      }
    }

    .buy_tip {
      color: #fff;
      text-align: center;
      font-size: 20rpx;
    }
  }
}

/* 购买成功 */
.buy_success {
  width: 600rpx;
  display: flex;
  flex-direction: column;
  padding: 40rpx 20rpx;
  position: relative;
  .content {
    text-align: center;

    .content_text {
      font-size: 30rpx;
      font-weight: bold;
      margin: 30rpx 0;
    }

    .content_text2 {
      font-size: 26rpx;
      color: #4d4d4d;
    }

    .close_btn {
      // min-width: 150rpx;
      // max-width: 180rpx;
      margin: auto;
      margin-top: 40rpx;
      // height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      // line-height: 60rpx;
      // background-image: linear-gradient(270deg, #f0c611 0%, #4effff 100%),
      //   linear-gradient(#dcb71a, #dcb71a);
      // background-blend-mode: normal, normal;
      // border-radius: 32rpx;

      button {
        // min-width: 150rpx;
        width: 180rpx;
        // max-width: 180rpx;
        margin: auto;
        font-size: 26rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(270deg, #f0c611 0%, #4effff 100%),
          linear-gradient(#dcb71a, #dcb71a);
        background-blend-mode: normal, normal;
        border-radius: 32rpx;
      }
    }
  }
  .box-close {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -120rpx;
    opacity: 0.5;
    image {
      width: 80rpx;
      height: 80rpx;
    }
  }
}

/* 领取遮罩 */

.get_success {
  position: relative;
  width: 623rpx;
  height: 310rpx;
  justify-content: center;
  align-items: center;

  .content {
    position: absolute;
    width: 100%;
    top: -200rpx;
    justify-content: center;
    align-items: center;

    .success_img {
      width: 360rpx;
      height: 290rpx;
      margin-left: 19%;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .success_text {
      margin-top: 70rpx;
      font-family: PingFang-SC-Medium;
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
    }

    .get_btn {
      width: 80%;
      height: 80rpx;
      margin: 70rpx auto;
      background-color: #ebc717;
      border-radius: 6rpx;
      border: 0;

      button {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        background-color: #ebc717;
        border-radius: 6rpx;
        font-size: 26rpx;
        border: 0;
      }
    }
  }
}

/* 分享保存图片 */
.share_content {
  width: 650rpx;
  margin: auto;

  .share_img {
    width: 100%;
    height: 600rpx;
    border-radius: 20rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .share_detail {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 95%;
    margin: auto;

    .share_text {
      display: flex;
      flex-direction: column;
      width: 100%;

      .name {
        font-size: 36rpx;
        font-weight: bold;
        margin-top: 30rpx;
      }

      .host {
        display: flex;
        margin-top: 40rpx;

        .host_logo {
          width: 60rpx;
          height: 60rpx;
          border-radius: 30rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }
      }

      .two_box {
        display: flex;
        justify-content: space-between;
        height: 40rpx;
        font-size: 24rpx;
        margin-top: 30rpx;
        width: 50%;

        .count {
          display: flex;
          min-width: 120rpx;
          max-width: 250rpx;
          letter-spacing: 1rpx;
          background-color: #53a8e8;
          border: #53a8e8;
          padding: 0 10rpx;
          height: 40rpx;
          line-height: 40rpx;
          color: #fff;
          border-radius: 5rpx;

          .total {
            text-align: center;
            line-height: 40rpx;
            height: 40rpx;
            font-weight: bold;
          }
        }

        .models {
          min-width: 80rpx;
          max-width: 150rpx;
          text-align: center;
          height: 36rpx;
          line-height: 36rpx;
          color: #fff;
          border-radius: 5rpx;
          margin-left: 10rpx;
          background-color: #091227;
          color: #fff;
        }

        .types {
          margin-left: 20rpx;
          min-width: 60rpx;
          max-width: 100rpx;
          height: 38rpx;
          text-align: center;
          background-image: linear-gradient(
              102deg,
              #d8a0d8 0%,
              #a4bbe5 41%,
              #cdffd7 100%
            ),
            linear-gradient(#181816, #181816);
          background-blend-mode: normal, normal;
          line-height: 38rpx;
          border-radius: 5rpx;
        }
      }

      .name {
        color: #000;
      }
    }

    .share_logo {
      display: flex;
      justify-content: space-between;

      .share_qrcode {
        display: flex;
        flex-direction: column;
        margin-top: 20rpx;

        image {
          width: 120rpx;
          height: 120rpx;
          margin-top: 10rpx;
          margin-left: 20rpx;
        }

        text {
          margin: 20rpx 0;
          font-size: 24rpx;
        }
      }
    }
  }
}

.save_btn {
  width: 90%;
  margin: 40rpx auto;

  button {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
      linear-gradient(#dcb71a, #dcb71a);
    background-blend-mode: normal, normal;
    color: #000;
    font-family: PingFang-SC-Medium;
    font-size: 26rpx;
    border-radius: 6rpx;
  }
}

.test {
  width: 750rpx;

  .canvas {
    width: 650rpx;
    height: 1500rpx;
    background-color: #000;
    margin: 0 auto;
  }
}

.share-box {
  left: 0;
  top: 0;
  position: fixed;
  height: 100vh;
  width: 100vw;

  .share-icon {
    font-size: 30rpx;
    position: absolute;
    bottom: 100rpx;
    left: 355rpx;
    background-color: #1a1a1a;
    color: #999;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    padding: 10rpx;
  }

  .share-list {
    position: absolute;
    width: 650rpx;
    left: 50rpx;
    top: 1100rpx;
    display: flex;
    justify-content: space-between;
    z-index: 1;

    .share-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
      font-size: 13rpx;

      .share-menu {
        width: 85rpx;
        height: 85rpx;
        border-radius: 20rpx;
        background-color: #fff;
      }

      ::v-deep button {
        font-size: 13rpx !important;
        background-color: transparent;
        padding: 0;
        color: #fff;
      }

      &:first-child {
        justify-content: center;
        font-size: 30rpx;
      }
    }
  }

  // 分享海报
  .posters {
    width: 650rpx;
    height: 500rpx;
    border-radius: 20rpx;
    // overflow: hidden;
    margin: 0 50rpx;
    position: relative;
    z-index: 1;
    overflow: auto;

    .posters-canvas {
      width: 650rpx;
      height: 1065rpx;
      margin: 0 auto;
      // background-color: fff;
    }
  }
}

.files {
  ::v-deep .u-popup__content {
    background-color: transparent !important;
  }
}

// 分享海报
.share {
  position: relative;

  .share-src {
    height: 100vh;
    width: 100%;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    // padding-top: 50rpx;

    .share-img {
      width: 640rpx;
      border-radius: 20rpx;
    }

    // .share-poster {
    //   border-radius: 20rpx;
    //   overflow: hidden;

    //   image {
    //     width: 650rpx;
    //   }
    // }
  }

  // .share-close {
  //   position: absolute;
  //   left: 50%;
  //   transform: translateX(-50%);
  //   bottom: 0rpx;
  //   opacity: 0.5;
  //   image {
  //     width: 80rpx;
  //     height: 80rpx;
  //   }
  // }
  ::v-deep .u-popup__content {
    background-color: transparent;
  }
}

.share-tips {
  position: relative;
  .share-content {
    height: 100vh;
    position: relative;
    overflow: hidden;
    .share-canvas {
      height: 80%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      min-height: fit-content;
      .share-image {
        padding-top: 110rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        // pointer-events: auto;

        image {
          height: 95%;
        }
      }
      // justify-content: center;
    }
    .share-save {
      width: 100%;
      height: 20%;
      display: flex;
      align-items: center;
      flex-direction: column;
      min-height: fit-content;
      color: #fff;
      .save-text {
        // margin-top: 20rpx;
        font-weight: 400 !important;
        font-size: 30rpx;
      }
      image {
        width: 100rpx;
        flex-shrink: 0;
      }
    }
  }
  .share-arrow {
    position: fixed;
    right: 50rpx;
    top: 0;

    image {
      width: 50rpx;
      height: 50rpx;
      // transform: rotateZ(330deg);
    }
  }

  .share-text {
    position: fixed;
    top: 70rpx;
    right: 50rpx;
    color: #fff;
    font-size: 26rpx;
  }

  ::v-deep .u-popup__content {
    background-color: transparent;
    img {
      pointer-events: auto;
    }
  }
}
/*登录弹框*/
.showLoginMask {
  width: 600rpx;
  margin: auto;

  .title {
    font-size: 36rpx;
    padding: 30rpx 0;
    font-weight: bold;
    text-align: center;
  }

  .subTitle {
    font-size: 22rpx;
    text-align: center;
    color: #999999;

    text {
      font-weight: bold;
      color: #999999;
    }
  }

  .input {
    display: flex;
    flex-direction: column;
    width: 85%;
    font-size: 26rpx;
    margin: 60rpx auto 0;

    .phone {
      display: flex;
      width: 100%;
      padding-bottom: 5rpx;
      height: 70rpx;
      line-height: 70rpx;
      border-bottom: 1rpx solid #ccc;

      select {
        width: 120rpx;
        background: none;
        border: 0;
      }

      input {
        height: 70rpx;
        line-height: 70rpx;
        max-width: 40%;
        margin-left: 20rpx;
      }

      button {
        min-width: 160rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin: 15rpx 0;
        font-size: 22rpx;
        font-weight: 300;
        background-color: #4effff;
        border-radius: 20rpx;
        border: 0;
      }
    }

    .code {
      display: flex;
      width: 100%;
      height: 70rpx;
      line-height: 70rpx;
      padding-bottom: 5rpx;
      border-bottom: 1rpx solid #ccc;

      input {
        height: 70rpx;
        line-height: 70rpx;
        max-width: 40%;
        margin-left: 20rpx;
      }
    }
  }

  .submit_btn {
    width: 85%;
    margin: 70rpx auto 30rpx;
    height: 80rpx;
    border: 0;

    button {
      height: 80rpx;
      line-height: 80rpx;
      margin: 30rpx auto;
      background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
        linear-gradient(#dcb71a, #dcb71a);
      background-blend-mode: normal, normal;
      border-radius: 36rpx;
      font-size: 24rpx;
      border: 0;
    }
  }

  .agree_read {
    width: 100%;
    margin: auto;
    font-size: 22rpx;
    letter-spacing: -1rpx;
    color: #999999;
    padding-bottom: 80rpx;
    text-align: center;

    text {
      color: #4effff;
    }
  }
}

.watermark {
  width: 260rpx;
  height: 48rpx;
  padding: 62rpx 0;
  margin: auto;
}

/deep/ uni-radio-group {
  display: inline !important;
}
.buy-suc {
  height: 100%;
  width: 100%;
}
.buys-box {
  ::v-deep .u-popup__content {
    background-color: transparent !important;
  }
}
</style>
